function Swiper(el) {
    //this === swiper1/swiper2
    //保存大家都使用的数据
    this.el = document.querySelector(el)
    this.pages = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1
    //启动插件
    this.init()
}

Swiper.prototype.init = function () {
    //this === swiper1/swiper2

    //功能
    //自动切换轮播图
    this.autoplay()
    //分页器移入 
    this.pageOver()
    //分页器移出
    this.pageOut()

}

Swiper.prototype.pageOut = function(){ //this===swiper1/swiper2
    //遍历
    //绑定移出事件
    //事件处理函数中 - 重新调用autopplay()
    this.pages.forEach(item => {
        item.onmouseout = () => {
            this.autoplay()
        }
    })
}

Swiper.prototype.pageOver = function () { //this===swiper1/swiper2
    // 获取当前和模型所有分页器 (直接用全局)
    // 遍历 
    this.pages.forEach((item, i) => { //item就是一个个分页器  li标签对象
        // 绑定鼠标移入事件（1- 清除定时器， 2- 重置num 3- 换成当前图 4- 同步分页器
        item.onmouseover = () => { //this===swiper1/swiper2
            clearInterval(this.t)
            this.num = i+1
            this.el.querySelector('img').src = `./../imgs/img${this.num}.jpg`
            this.tbPage(this.num)


        }
    })

}

Swiper.prototype.autoplay = function () { //this === swiper1/swiper2
    // 写定时器 每隔2s将图片名num++
    // 判断num大于6 就重置为1
    // 切换当前盒模型里面的图片
    // let num = 1
    //是隐式声明的全局变量  第一次swiper t=1 第二次swiper t=2  第一次保存的标识就被覆盖了
    this.t = setInterval(() => { //this 父function中的this 
        this.num++
        if (this.num > 6) this.num = 1
        this.el.querySelector('img').src = `./../imgs/img${this.num}.jpg`

        //    //分页器同步
        //    // 获取当前选中的分页器去掉样式
        //    this.el.querySelector('ul li.active').className = ''
        //    // 给当前的分页器加样式（num-1=当前的分页器索引）
        //      this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
        this.tbPage(this.num)
    }, 2000)
}

Swiper.prototype.tbPage = function (num) {
    // 获取当前选中的分页器去掉样式
    this.el.querySelector('ul li.active').className = ''
    // 给当前的分页器加样式（num-1=当前的分页器索引）
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}